<template>
    <div class="addMenuBox">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="菜单名称" prop="title">
                <el-input v-model="ruleForm.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="上级菜单">
                <el-select v-model="ruleForm.parentId" class="m-2" placeholder="请选择" size="large">
                    <el-option label="无上级菜单" :value="0" />
                    <el-option v-for="item in menuList" :key="item.id" :label="item.title" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="前端名称" prop="name">
                <el-input v-model="ruleForm.name" autocomplete="off" :disabled="inputDisabled" />
            </el-form-item>
            <el-form-item label="前端图标">
                <el-input v-model.number="ruleForm.icon" :disabled="inputDisabled" />
            </el-form-item>
            <el-form-item label="是否显示：">
                <el-radio-group v-model="ruleForm.hidden" class="ml-4">
                    <el-radio :label="0" size="large">是</el-radio>
                    <el-radio :label="1" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model.number="ruleForm.sort" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { getUmsMenuInfoAPI, addMenuParamsAPI, getEditMenuParamsAPI, editMenuAPI } from "./api";
import { useRoute } from "vue-router"
const route = useRoute()
const ruleFormRef = ref<FormInstance>()
const menuList = ref<IMenuListModel[]>([])

// 控制前端名称和前端图表的禁用与否
const inputDisabled = ref<boolean>(false)

// 监听地址栏有没有传参数
watch(() => route.query.id, () => {
    if (route.query.id) {
        getEditMenuParamsAPI(Number(route.query.id)).then(res => {
            if (res.code === 200) {
                Object.assign(ruleForm, res.data)
                inputDisabled.value = true
            }
        })
    }
}, { immediate: true })

// 获取下拉框数据
getUmsMenuInfoAPI(0, {
    pageNum: 1,
    pageSize: 10
}).then((res) => {
    if (res.code === 200) {
        console.log(res);
        menuList.value = res.data.list
    }
})
const ruleForm = reactive<IMenuListModel>({
    hidden: 0,
    icon: '',
    name: '',
    parentId: 0,
    sort: '',
    title: '',
})

const rules = reactive({
    title: [{ required: true, trigger: "blur", message: "菜单名称不能为空" }],
    name: [{ required: true, trigger: "blur", message: "前端名称不能为空" }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            if (route.query.id) {
                ElMessage.success("修改成功")
                editMenuAPI(Number(route.query.id), ruleForm)
            } else {
                ElMessage.success("添加成功")
                addMenuParamsAPI(ruleForm)
            }
        } else {
            return false
        }
    })
}


</script>


<style lang="less" scoped>
.addMenuBox {
    box-shadow: 0 0 4px 2px #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}
</style>